<template>
    <div class="container" @click.self="close">
        <div class="contain">
            <div class="header">
                <i class="iconfont icon-guanbi" @click="close"></i>
            </div>
            <div class="main">
                <img src="../../commom/image/code.png" class="quick-mark">
            </div>
            <div class="footer">
                长按识别二维码<br>关注 “探亲” 公众号
            </div>
        </div>
    </div>
</template>

<script type="text/ecamscript-6">
export default {
    methods: {
        close() {
            this.$emit('close')
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~commom/stylus/mixin'
.container
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0,0,0,.3)
    z-index 100
    .contain
        position absolute
        width 254px
        height 310px
        border-radius 7px
        background #ffffff
        top 50%
        left 50%
        transform translate(-50%, -50%)
        background #ffffff
        .header
            height 40px
            .iconfont
                float right
                margin-right 10px
                font-size 20px
                line-height 40px
                color #666666
                font-weight bold
                extent-click()
        .main
            .quick-mark
                display block
                width 204px
                height 204px
                margin 0 auto
                border 1px solid #ccc
        .footer
            color #333333
            font-size 14px
            line-height 1.3
            padding-top 12px
            text-align center
            font-weight bold
</style>
